<template>
  <view class="container">
    <!-- <u-subsection :list="['日', '周', '月']" mode="button" :current="current" @change="sectionChange"
      bgColor="rgba(238, 238, 238, 1)"></u-subsection> -->

    <view class="common_cell warnType">
      <view :class="{
        'warnType_text_active': current === 0
      }" @click="current = 0">日</view>
      <view :class="{
        'warnType_text_active': current === 1
      }" @click="current = 1">周</view>
      <view :class="{
        'warnType_text_active': current === 2
      }" @click="current = 2">月</view>

      <img src="@/static/icon/xiazai.png" alt="">
    </view>

    <view v-if="current === 0">
      <view class="common_cell">
        <u-cell title="选择日期" isLink :value="'2024年10月18日'" />
      </view>

      <view class="common_cell">
        <u-cell title="报警次数" isLink :value="'2'" />
      </view>
    </view>

    <view v-else-if="current === 1">
      <view class="warning_group_title">本周</view>
      <view class="common_cell">
        <u-cell :border="false" title="报警次数" value="3" />
      </view>

      <view class="warning_group_sub_title">
        <text>日期</text>
        <text>报警次数</text>
      </view>
      <view class="common_cell">

        <u-cell :border="false" title="2024-11-03" value="3" />
      </view>

    </view>

    <view v-else>
      <u-tabs :list="list1"></u-tabs>

      <view class="common_cell">
        <u-cell :border="false" title="报警次数" value="3" />
      </view>

      <view class="warning_group_sub_title">
        <text>日期</text>
        <text>报警次数</text>
      </view>
      <view class="common_cell">

        <u-cell :border="false" title="2024-11-03" value="3" />
      </view>

    </view>
  </view>
</template>

<script>
import * as Api from "@/api/page";
import { checkLogin } from "@/core/app";
import * as UserApi from "@/api/user";

const App = getApp();

export default {
  components: {},
  data() {
    return {
      // 页面参数
      options: {},
      current: 0,
      list1: [{
        name: '本月'
      }, { name: "上月" }]
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() { },

  methods: {
    sectionChange(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f6f7fb;
  padding: 34.091rpx;
}

.warnType {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10.227rpx 51.136rpx;

  img {
    width: 47.727rpx;
    height: 47.727rpx;
  }

  view {
    width: 112.5rpx;
    height: 40.909rpx;
    gap: 10px;
    border-radius: 8.523rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    color: rgba(255, 255, 255, 1);

    font-family: "Microsoft YaHei";
    font-size: 27.273rpx;
    font-weight: 400;
    line-height: 36rpx;
    text-align: left;
    background: rgba(141, 187, 242, 1);
  }
}

.warnType_text_active {
  background: rgba(96, 164, 247, 1) !important;
}

.warning_group_title {
  font-family: "Microsoft YaHei";
  font-size: 27.273rpx;
  font-weight: 400;
  line-height: 36rpx;
  text-align: left;
  color: rgba(0, 0, 0, 1);
  margin-top: 17.045rpx;
  margin-bottom: 17.045rpx;
}

.warning_group_sub_title {
  margin: 17.045rpx 0 17.045rpx 0;
  display: flex;
  justify-content: space-between;
  align-self: center;
  color: rgba(0, 0, 0, 0.75);
  font-family: "Microsoft YaHei";
  font-size: 23.864rpx;
  font-weight: 400;
  line-height: 31.5rpx;
  text-align: left;

}
</style>